<template>
	<view class="allOrders">
		<header class="tab">
			<view class="tabItem" :class="{'active' : index == current}" @click="clickTab(index,item.type)"
				v-for="(item,index) in tabItemList" :key="index">
				{{item.name}}
			</view>
		</header>

		<backTop :isTop="isTop"></backTop>

		<!-- 订单列表 -->
		<view class="orderList Column">
			<!-- 有数据 -->
			<view v-if="goodList.length != 0">
				<view class="goods" v-for="(item,index) in goodList" :key="index">
					<view class="goods_head Row">
						<view class="title">{{item.order_sn}}</view>
						<view class="status">{{item.order_status_text}}</view>
					</view>

					<view class="goods_cont Row">
						<view class="img">
							<image class="photoSize" :src="item.cover_image" mode="aspectFill"></image>
						</view>

						<view class="Column" style="width: 50%;height: 76px;justify-content: space-around;">
							<view class="goodsName">{{item.goods_name}} </view>
							<view class="spec" v-if="spec">{{item.spec}}</view>
						</view>

						<view class="goodsMoney Column">
							<view class="">￥ <text class="money">{{item.goods_price}}</text></view>
							<view class="total">共{{item.goods_num}}件</view>
						</view>
					</view>

					<view class="Column order-foot">
						<view class="Row" v-if="item.tracking_number"
							style="margin-bottom: 10rpx;justify-content: space-between;">
							<view class="status">快递单号 {{item.tracking_number}}</view>
							<view class="copyText" @click="copyTextToClipboard(item.tracking_number)">复制</view>
						</view>
						<view class="order-foot-item" v-if="item.pay_time_text">
							<view class="">下单时间</view>
							<view class="">{{item.pay_time_text}}</view>
						</view>
						<view style="margin-top: 4px;" class="status"
							v-if="item.pay_status == 0 && !item.expire_time_text">需在 <span
								class="red">{{item.expire_time_text}}</span> 内支付</view>

						<view class="Row btn-item">
							<view class="delete" v-if="item.pay_status == -1 || item.pay_status == 0"
								@click="delOrder(item.order_sn)">删除</view>
							<view class="pay" v-if="item.pay_status == 0" @click="openPupup(item)">去支付</view>
						</view>
					</view>
				</view>


			</view>
			<!-- 没数据 -->
			<view class="emptyBox" v-else> 暂无数据 </view>

			<!-- 选择支付方式 -->
			<u-popup customStyle="background-color: #f8f8f8;" :round="12" :show="payPopup" mode="bottom" @close="close"
				@open="open">
				<view class="popup_box Column">
					<view class="close" @click="close"><u-icon name="close" color="#fff" size="14"></u-icon></view>
					<view class="popup-product Row" style="margin-bottom: 12px;">
						<view style="width: 80px;height: 80px;">
							<image class="photoSize" :src="order.cover_image" mode="aspectFill"></image>
						</view>
						<view class="popup-foot Column">
							<view class="popup-price">￥{{order.goods_price}}</view>
							<view class="product_Classify Row">{{order.goods_name}}</view>
						</view>
					</view>

					<!-- 支付方式 -->
					<view class="groupBox">
						<u-radio-group style="width:100%;" placement="column">
							<u-radio iconSize="18" size="24" :label="item.name" :name="item.name"
								v-for="(item, index) in radiolist" :key="index" @change="radioChange(item)"
								style="justify-content: space-between;">
								<view class="payOptions Row">
									<u-icon :name="item.icon" :color="item.color" size="28"></u-icon>
									<view class="optionsText">{{item.name}}</view>
								</view>
							</u-radio>
						</u-radio-group>
					</view>

					<view class="popupFoot Row">
						<view class="payment btn" @click="getOrderPayment()">确认支付</view>
					</view>
				</view>
			</u-popup>

			<!-- 支付二维码弹出层 -->
			<u-popup :round="8" customStyle="width:80%;" :show="codeShow" mode="center" @close="codeClose"
				@open="codeOpen">
				<view class="codeBox Column">
					<view class="close" data-param="1" @click="codeClose"><u-icon name="close" color="#fff"
							size="20"></u-icon></view>

					<view class="codeBox_code" v-if=" radiolist_name == '微信支付（人工审核）' ">
						<image class="photoSize" :src="wxPay.qrcode" mode="aspectFill"></image>
					</view>
					<view class="codeBox_code" v-if=" radiolist_name == '支付宝备用支付（人工审核）' ">
						<image class="photoSize" :src=" 'https://kffws.hbkfu.com' + wxPay.alipay_payment_qrcode2"
							mode="aspectFill"></image>
					</view>

					<view class="codeBox_tit">{{wxPay.qrcode_tips}}</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		showLoading,
		showToast,
		showError,
		hideLoading
	} from '@/utils/toast';
	import backTop from '@/components/back-top/back-top.vue';

	import {
		apiOrderList,
		apiDelOrder,
		apiOrderPayment
	} from '@/api/order.js';
	import {
		wxMiniProgramPay
	} from '@/utils/util.js';

	export default {
		components: {
			backTop
		},
		data() {
			return {
				height: uni.getSystemInfoSync().statusBarHeight,
				payPopup: false, // 
				codeShow: false, // 二维码弹窗
				isTop: false,

				radiolist: [{
						name: '微信支付',
						icon: 'weixin-circle-fill',
						color: '#23AB3C',
						disabled: true,
						display: 'none',
						type: '3'
					},
					// {
					// 	name: '支付宝支付（自动审核）',
					// 	icon: 'zhifubao-circle-fill',
					// 	color: '#34B4F1',
					// 	disabled: false,
					// 	display: 'block',
					// 	type: '4'
					// },
					// {
					// 	name: '银行卡支付（自动审核）',
					// 	icon: 'rmb-circle-fill',
					// 	color: '#ffde00',
					// 	disabled: true,
					// 	display: 'block',
					// 	type: '5'
					// },
					// {
					// 	name: '微信支付（人工审核）',
					// 	icon: 'weixin-circle-fill',
					// 	color: '#23AB3C',
					// 	disabled: true,
					// 	display: 'block',
					// 	type: '1'
					// },
					// {
					// 	name: '支付宝备用支付（人工审核）',
					// 	icon: 'zhifubao-circle-fill',
					// 	color: '#34B4F1',
					// 	disabled: true,
					// 	display: 'block',
					// 	type: '1'
					// }
				],
				radiolist_name: null,
				payType: '1',
				order: {},
				wxPay: [], // 二维码图片

				tabItemList: [{
						'name': '全部',
						'type': 'all'
					},
					{
						'name': '待付款',
						'type': '0'
					},
					{
						'name': '待发货',
						'type': '1'
					},
					{
						'name': '已发货',
						'type': '2'
					},
					{
						'name': '已完成',
						'type': '3'
					}
				],
				current: 0,
				currentType: 'all',

				goodList: [],
				current_page: 1,
				last_page: 1
			}
		},
		onShow() {
			this.onshowMehods();
		},
		onPageScroll(e) {
			this.isTop = e.scrollTop > 100 ? true : false;
		},
		methods: {
			getOrderPayment() {
				let that = this;
				if (that.payType == 5) {
					that.bindLogs();
					return;
				}
				apiOrderPayment({
					order_sn: that.order.order_sn, // 订单列表ID
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return;
					}
					that.judgePayType(res.data);
				}).catch(err => console.log(err))
			},
			judgePayType(res) {
				let that = this;
				if (that.payType == 1) {
					that.wxPay = res.payment;
					that.codeOpen();
					that.close();
				} else if (that.payType == 3) { // 微信支付
					wxMiniProgramPay(JSON.parse(res.payment))
						.then(payRes => {
							console.log('支付成功:', payRes.res);
						}).catch(payErr => {
							console.error('支付失败或取消:', payErr);
						})
				} else if (that.payType == 4) { // 支付宝
					const isWeChat = that.is_wx() === "WeChat";
					if (isWeChat) {
						const encodedUrl = btoa(res.payment.rt8_payInfo);
						uni.navigateTo({
							url: `/pages/index/materialRequisition/productDetail/payTransitPage/payTransitPage?url=${encodeURIComponent(encodedUrl)}&id=${this.order.id}`
						});
					} else {
						location.href = res.payment.rt8_payInfo;
					}
				}
			},

			is_wx() { // 判断是否在微信环境中
				let that = this;
				let en = window.navigator.userAgent.toLowerCase();
				// 匹配en中是否含有MicroMessenger字符串
				if (en.match(/MicroMessenger/i) == 'micromessenger') {
					// console.log("当前环境---微信");
					return "WeChat";
				}
				if (en.match(/MicroMessenger/i) != 'micromessenger') {
					// console.log("当前环境---浏览器");
					return "browser";
				}
			},
			// 获取绑卡记录
			bindLogs() {
				uni.$u.http.post('/kafu.helipay/bindLogs', {}).then(res => {
					if (res.data == "") { // 首次使用银行卡
						uni.navigateTo({
							url: "/pages/index/materialRequisition/productDetail/CardPay/CardPay?order_id=" +
								this.order.id
						})
					} else { // 绑定
						uni.navigateTo({
							url: "/pages/index/materialRequisition/productDetail/bindPay/bindPay?order_id=" +
								this.order.id + "&unit_price=" + this.order.pay_price
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},

			delOrder(id) {
				let that = this;
				uni.showModal({
					title: '确认删除订单？',
					confirmColor: "#ea1f17",
					success: function(res) {
						if (res.confirm) {
							apiDelOrder({
								order_sn: id
							}).then(res => {
								if (res.code == 0) {
									uni.$u.toast(res.msg);
									return;
								}

								uni.$u.toast('删除成功');
								that.onshowMehods();
							}).catch(err => console.log(err))
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			getGoodList() {
				let that = this;
				// console.log(this.BASE_URL)
				apiOrderList({
						status: that.currentType,
						page: that.current_page
					})
					.then(res => {
						let array = res.data.orderList.data;

						that.last_page = res.data.orderList.last_page;
						array.forEach(element => {
							element.cover_image = this.BASE_URL + element.cover_image
							that.goodList.push(element)
						})
					}).catch(err => console.log(err))
			},


			clickTab(cur, type) {
				if (cur != this.current) {
					//切换后的业务逻辑
					this.onshowMehods();
				}
				this.current = cur;
				this.currentType = type;
			},
			copyTextToClipboard(text) {
				navigator.clipboard.writeText(text);
				uni.$u.toast("复制成功");
			},
			onshowMehods() {
				this.current_page = 1;
				this.last_page = 1;
				this.goodList = [];
				this.getGoodList();
			},
			// 支付方式
			radioChange(item) {
				this.radiolist_name = item.name;
				this.payType = item.type;
			},
			openPupup(item) {
				this.order = item;
				this.open();
			},
			open() {
				this.payPopup = true;
			},

			close() {
				this.payPopup = false;
			},
			codeClose() {
				this.onshowMehods();
				this.codeShow = false;
			},
			codeOpen() {
				this.codeShow = true;
			},
		},
		onReachBottom() {
			let that = this;
			that.current_page++;
			if (that.current_page > that.last_page) {
				uni.$u.toast("暂无更多~");
				return;
			}
			that.getGoodList();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F6F8;
	}

	.groupBox {
		width: 97%;
		border-radius: 12px;
		background-color: #fff;
		padding: 8px 0 8px 12px;
		marign-top: 12px;

		.payOptions {
			width: 88%;
			justify-content: flex-start;
			padding: 6px 0 6px;

			.optionsText {
				margin-left: 12rpx;
			}
		}
	}

	.allOrders {
		width: 100%;

		.tab {
			width: 100%;
			display: flex;
			background-color: #fff;
			position: fixed;
			left: 0;
			z-index: 3;

			.tabItem {
				color: #7E7E9A;
				width: 100%;
				text-align: center;
				padding: 16rpx 0;
			}

			.active {
				color: #0056FF;
				font-weight: bold;
			}
		}


		.codeBox {
			width: 92%;
			align-items: center;
			padding: 40rpx 15px;

			position: relative;

			&_tit {
				width: 94%;
				font-size: 26rpx;
				margin-top: 20px;
			}

			&_code {
				width: 190px;
				height: 230px;
			}

			.close {
				border-radius: 50rpx;
				background-color: #cacaca;
				padding: 12rpx;

				position: absolute;
				top: -16px;
				right: -11px;
			}
		}

		.orderList {
			padding: 20rpx;
			z-index: 1;
			padding-top: 46px;


			.popup_box {
				align-items: center;
				border-radius: 10px;
				padding: 0 12px 12px 12px;
				position: relative;

				.popup-product {
					justify-content: space-between;
					width: 100%;
					padding-top: 12px;

					.popup-foot {
						width: 76%;
					}

					.popup-price {
						color: red;
						font-size: 20px;
					}
				}

				.text {
					font-size: 15px;
				}

				.close {
					border-radius: 50rpx;
					background-color: #cacaca;
					padding: 12rpx;

					position: absolute;
					top: 40rpx;
					right: 30rpx;
				}

				.title {
					font-size: 32rpx;
					font-weight: 600;
				}

				.deliveryMethod {
					justify-content: space-between;
					width: 94%;
					background: #fff;
					border-radius: 12px;
					/* padding-top: 24px; */
					padding: 12px;
					margin-top: 12px;

					.active {
						color: #0056FF;
						border: 1px solid #0056FF;
						background-color: #e5eeff;
						border-radius: 6px;
						margin-right: 8px;
						padding: 3px 9px;
					}

					&_item {
						background-color: #f2f2f2;
						border-radius: 6px;
						margin-right: 8px;
						padding: 4px 10px;
					}
				}

				.sizeBox {
					width: 94%;
					background: #fff;
					border-radius: 12px;
					/* padding-top: 24px; */
					padding: 12px;
					margin-top: 12px;

					&_head {
						margin-bottom: 10px;
					}

					.active {
						color: #0056FF;
						border: 1px solid #0056FF;
						background-color: #e5eeff;
						border-radius: 6px;
						margin-right: 8px;
						padding: 3px 9px;
					}

					&_item {
						background-color: #f2f2f2;
						border-radius: 6px;
						margin-right: 8px;
						padding: 4px 10px;
					}
				}

				.popup-product {
					justify-content: space-between;
					width: 100%;
					padding-top: 12px;

					.popup-foot {
						width: 76%;
					}

					.popup-price {
						color: red;
						font-size: 20px;
					}
				}

				.text {
					font-size: 15px;
				}

				.popupContent {
					width: 94%;
					border-radius: 12px;
					background-color: #fff;
					padding: 0 12px 12px;
					margin: 12px 0;

					.text {
						margin-left: 12rpx;
					}
				}

				.popupFoot {
					width: 100%;
					justify-content: space-around;

					.payment {
						color: #fff;
						border-radius: 50rpx;
						background-color: #0056FF;
						margin-top: 12px;
					}

					.abandon {
						border-radius: 8rpx;
						border: 2rpx solid #a8a8a8;
					}

					.btn {
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 24rpx 0;
					}
				}
			}

			.emptyBox {
				width: 100%;
				height: 84vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.goods {
				border-radius: 10rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx;

				.goods_head {
					font-size: 30rpx;
					justify-content: space-between;

					.title {
						width: 50%;
						font-weight: 550;
					}

					.status {
						color: #0056FF;
					}
				}

				.order-foot {
					padding: 6px 0 0;

					.order-foot-item {
						width: 100%;
						display: flex;
						justify-content: space-between;
					}

					.btn-item {
						justify-content: flex-end;

						.delete {
							display: flex;
							justify-content: center;
							border: 1px solid #1a1a1a;
							border-radius: 6px;
							padding: 6px 12px;
							margin-top: 10px;
						}

						.pay {
							display: flex;
							align-items: center;
							justify-content: center;
							color: #0056FF;
							border: 1px solid #0056FF;
							border-radius: 6px;
							padding: 6px 12px;
							margin-top: 10px;
							margin-left: 10px;
						}
					}


					.red {
						color: #ea1f17;
						padding: 0 2px;
					}

					.status {
						font-size: 16px;
						text-align: right;
						// padding-top: 6px;
					}
				}

				.copyText {
					color: #0056FF;
					font-size: 30rpx;
					// border-radius: 4px;
					// border: 2rpx solid #0056FF;
					// padding: 4rpx 20rpx;
				}

				.goods_cont {
					width: 100%;
					justify-content: space-between;
					border-bottom: 1px solid #f3f3f3;
					padding: 6px 0 12px;

					.img {
						width: 76px;
						height: 76px;
						border-radius: 10rpx;
						overflow: hidden;
					}

					.goodsName {
						display: flex;
						align-items: center;
						width: 100%;
						font-size: 30rpx;

					}

					.spec {
						color: #7E7E9A !important;
						font-size: 14px;
					}

					.goodsMoney {
						width: 24%;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.money {
							font-size: 36rpx;
							font-weight: 550;
						}

						.total {
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}
</style>